React useActionState: Debouncing diegimas optimaliam veiksmų dažnio ribojimui

Šiuolaikinėse interneto programose efektyvus vartotojo sąveikų valdymas yra svarbiausias dalykas. Veiksmai, tokie kaip formų pateikimas, paieškos užklausos ir duomenų atnaujinimai, dažnai sukelia serverio operacijas. Tačiau pernelyg didelis serverio iškvietimų skaičius, ypač suaktyvintas greitai vienas po kito, gali sukelti našumo problemas ir pabloginti vartotojo patirtį. Čia į pagalbą ateina „debouncing“, o React kablys useActionState siūlo galingą ir elegantišką sprendimą.

Kas yra „Debouncing“?

„Debouncing“ yra programavimo praktika, naudojama užtikrinti, kad daug laiko reikalaujančios užduotys nebūtų vykdomos per dažnai, atidedant funkcijos vykdymą, kol praeis tam tikras neveiklumo laikotarpis. Įsivaizduokite: ieškote produkto elektroninės prekybos svetainėje. Be „debouncing“, kiekvienas klavišo paspaudimas paieškos laukelyje sukeltų naują užklausą serveriui, norint gauti paieškos rezultatus. Tai galėtų perkrauti serverį ir vartotojui sukelti trūkčiojančią, nereaguojančią patirtį. Su „debouncing“, paieškos užklausa siunčiama tik tada, kai vartotojas nustoja rašyti trumpam laikotarpiui (pvz., 300 milisekundžių).

Kodėl naudoti useActionState „Debouncing“?

useActionState, pristatytas React 18 versijoje, suteikia mechanizmą valdyti asinchroninius būsenos atnaujinimus, kylančius iš veiksmų, ypač React serverio komponentuose. Jis ypač naudingas su serverio veiksmais, nes leidžia valdyti įkėlimo būsenas ir klaidas tiesiogiai komponente. Sujungus su „debouncing“ technikomis, useActionState siūlo švarų ir našų būdą valdyti serverio sąveikas, kurias sukelia vartotojo įvestis. Prieš `useActionState`, tokio tipo funkcionalumo diegimas dažnai apėmė rankinį būsenos valdymą su `useState` ir useEffect`, kas vedė prie išsamesnio ir potencialiai klaidingesnio kodo.

„Debouncing“ diegimas su useActionState: Žingsnis po žingsnio vadovas

Panagrinėkime praktinį pavyzdį, kaip įdiegti „debouncing“ naudojant useActionState. Apsvarstysime scenarijų, kai vartotojas rašo į įvesties lauką, ir mes norime atnaujinti serverio duomenų bazę įvestu tekstu, bet tik po trumpo delsimo.

1 žingsnis: Pagrindinio komponento paruošimas

Pirmiausia, sukursime paprastą funkcinį komponentą su įvesties lauku:

            import React, { useState, useCallback } from 'react';
import { useActionState } from 'react-dom/server';

async function updateDatabase(prevState: any, formData: FormData) {
  // Simulate a database update
  const text = formData.get('text') as string;
  await new Promise(resolve => setTimeout(resolve, 500)); // Simulate network latency
  return { success: true, message: `Updated with: ${text}` };
}

function MyComponent() {
  const [debouncedText, setDebouncedText] = useState('');
  const [state, dispatch] = useActionState(updateDatabase, {success: false, message: ""});

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const newText = event.target.value;
    setDebouncedText(newText);
  };

  return (
    <form action={dispatch}>
      <input type="text" name="text" value={debouncedText} onChange={handleChange} />
      <button type="submit">Update</button>
      <p>{state.message}</p>
    </form>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Šiame kode:

• Importuojame reikiamus kablius: useState, useCallback ir useActionState.
• Apibrėžiame asinchroninę funkciją updateDatabase, kuri imituoja serverio atnaujinimą. Ši funkcija priima ankstesnę būseną ir formos duomenis kaip argumentus.
• useActionState yra inicializuojamas su updateDatabase funkcija ir pradiniu būsenos objektu.
• handleChange funkcija atnaujina vietinę būseną debouncedText su įvesties verte.

2 žingsnis: „Debounce“ logikos diegimas

Dabar įdiegsime „debouncing“ logiką. Naudosime setTimeout ir clearTimeout funkcijas, kad atidėtume dispatch funkcijos, kurią grąžina `useActionState`, iškvietimą.

            import React, { useState, useRef, useCallback } from 'react';
import { useActionState } from 'react-dom/server';

async function updateDatabase(prevState: any, formData: FormData) {
  // Simulate a database update
  const text = formData.get('text') as string;
  await new Promise(resolve => setTimeout(resolve, 500)); // Simulate network latency
  return { success: true, message: `Updated with: ${text}` };
}

function MyComponent() {
  const [debouncedText, setDebouncedText] = useState('');
  const [state, dispatch] = useActionState(updateDatabase, {success: false, message: ""});
  const timeoutRef = useRef<number | null>(null);

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const newText = event.target.value;
    setDebouncedText(newText);

    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }

    timeoutRef.current = window.setTimeout(() => {
      const formData = new FormData();
      formData.append('text', newText);
      dispatch(formData);
    }, 300);
  };

  return (
    <div>
      <input type="text" value={debouncedText} onChange={handleChange} />
      <p>{state.message}</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Štai kas pasikeitė:

• Pridėjome useRef kablį, pavadintą timeoutRef, kad saugotume laukimo laikmačio ID. Tai leidžia mums išvalyti laikmatį, jei vartotojas vėl pradeda rašyti, kol delsa dar nepraėjo.
• handleChange viduje:
• Išvalome bet kokį esamą laikmatį naudodami clearTimeout, jei timeoutRef.current turi vertę.
• Nustatome naują laikmatį naudodami setTimeout. Šis laikmatis įvykdys dispatch funkciją (su atnaujintais formos duomenimis) po 300 milisekundžių neveiklumo.
• Mes perkėlėme dispatch iškvietimą iš formos į „debounced“ funkciją. Dabar naudojame standartinį įvesties elementą, o ne formą, ir serverio veiksmą suaktyviname programiškai.

3 žingsnis: Našumo ir atminties nutekėjimų optimizavimas

Ankstesnis diegimas yra funkcionalus, tačiau jį galima toliau optimizuoti, siekiant išvengti galimų atminties nutekėjimų. Jei komponentas yra išmontuojamas, kol laikmatis dar veikia, laikmačio atgalinio skambinimo funkcija vis tiek bus įvykdyta, kas gali sukelti klaidas ar netikėtą elgesį. Galime to išvengti išvalydami laikmatį useEffect kablyje, kai komponentas yra išmontuojamas:

            import React, { useState, useRef, useCallback, useEffect } from 'react';
import { useActionState } from 'react-dom/server';

async function updateDatabase(prevState: any, formData: FormData) {
  // Simulate a database update
  const text = formData.get('text') as string;
  await new Promise(resolve => setTimeout(resolve, 500)); // Simulate network latency
  return { success: true, message: `Updated with: ${text}` };
}

function MyComponent() {
  const [debouncedText, setDebouncedText] = useState('');
  const [state, dispatch] = useActionState(updateDatabase, {success: false, message: ""});
  const timeoutRef = useRef<number | null>(null);

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const newText = event.target.value;
    setDebouncedText(newText);

    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }

    timeoutRef.current = window.setTimeout(() => {
      const formData = new FormData();
      formData.append('text', newText);
      dispatch(formData);
    }, 300);
  };

  useEffect(() => {
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, []);

  return (
    <div>
      <input type="text" value={debouncedText} onChange={handleChange} />
      <p>{state.message}</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Pridėjome useEffect kablį su tuščiu priklausomybių masyvu. Tai užtikrina, kad efektas veiks tik tada, kai komponentas yra sumontuojamas ir išmontuojamas. Efekto valymo funkcijoje (kurią grąžina efektas) išvalome laikmatį, jei jis egzistuoja. Tai neleidžia laikmačio atgalinio skambinimo funkcijai įvykdyti po to, kai komponentas buvo išmontuotas.

Alternatyva: „Debounce“ bibliotekos naudojimas

Nors aukščiau pateiktas diegimas demonstruoja pagrindines „debouncing“ koncepcijas, specializuotos „debounce“ bibliotekos naudojimas gali supaprastinti kodą ir sumažinti klaidų riziką. Bibliotekos, tokios kaip lodash.debounce, suteikia patikimus ir gerai išbandytus „debouncing“ diegimus.

Štai kaip galite naudoti lodash.debounce su useActionState:

            import React, { useState, useCallback, useEffect } from 'react';
import { useActionState } from 'react-dom/server';
import debounce from 'lodash.debounce';

async function updateDatabase(prevState: any, formData: FormData) {
  // Simulate a database update
  const text = formData.get('text') as string;
  await new Promise(resolve => setTimeout(resolve, 500)); // Simulate network latency
  return { success: true, message: `Updated with: ${text}` };
}

function MyComponent() {
  const [debouncedText, setDebouncedText] = useState('');
  const [state, dispatch] = useActionState(updateDatabase, {success: false, message: ""});

  const debouncedDispatch = useCallback(debounce((text: string) => {
    const formData = new FormData();
    formData.append('text', text);
    dispatch(formData);
  }, 300), [dispatch]);

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const newText = event.target.value;
    setDebouncedText(newText);
    debouncedDispatch(newText);
  };

  return (
    <div>
      <input type="text" value={debouncedText} onChange={handleChange} />
      <p>{state.message}</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Šiame pavyzdyje:

• Importuojame debounce funkciją iš lodash.debounce.
• Sukuriame „debounced“ dispatch funkcijos versiją naudodami useCallback ir debounce. useCallback kablys užtikrina, kad „debounced“ funkcija būtų sukurta tik vieną kartą, o priklausomybių masyvas apima dispatch, siekiant užtikrinti, kad „debounced“ funkcija būtų atnaujinta, jei dispatch funkcija pasikeistų.
• handleChange funkcijoje mes tiesiog iškviečiame debouncedDispatch funkciją su nauju tekstu.

Globalūs aspektai ir geriausios praktikos

Diegiant „debouncing“, ypač programose su pasauline auditorija, atsižvelkite į šiuos dalykus:

• Tinklo delsa: Tinklo delsa gali labai skirtis priklausomai nuo vartotojo vietos ir tinklo sąlygų. „Debounce“ delsa, kuri gerai veikia viename regione, gali būti per trumpa ar per ilga vartotojams kitame. Apsvarstykite galimybę leisti vartotojams pritaikyti „debounce“ delsą arba dinamiškai ją koreguoti atsižvelgiant į tinklo sąlygas. Tai ypač svarbu programoms, naudojamoms regionuose su nepatikima interneto prieiga, pavyzdžiui, Afrikos ar Pietryčių Azijos dalyse.
• Įvesties metodų redaktoriai (IME): Vartotojai daugelyje Azijos šalių naudoja IME teksto įvedimui. Šie redaktoriai dažnai reikalauja kelių klavišų paspaudimų, kad būtų sudarytas vienas simbolis. Jei „debounce“ delsa yra per trumpa, ji gali trukdyti IME procesui, sukeldama vartotojui nepatogumų. Apsvarstykite galimybę padidinti „debounce“ delsą vartotojams, kurie naudoja IME, arba naudokite įvykių klausytoją, kuris labiau tinka IME kompozicijai.
• Prieinamumas: „Debouncing“ gali paveikti prieinamumą, ypač vartotojams su motorikos sutrikimais. Užtikrinkite, kad „debounce“ delsa nebūtų per ilga, ir suteikite alternatyvių būdų vartotojams suaktyvinti veiksmą, jei reikia. Pavyzdžiui, galite pateikti pateikimo mygtuką, kurį vartotojai gali paspausti, kad rankiniu būdu suaktyvintų veiksmą.
• Serverio apkrova: „Debouncing“ padeda sumažinti serverio apkrovą, tačiau vis tiek svarbu optimizuoti serverio kodą, kad užklausos būtų tvarkomos efektyviai. Naudokite talpyklą (caching), duomenų bazių indeksavimą ir kitas našumo optimizavimo technikas, kad sumažintumėte serverio apkrovą.
• Klaidų tvarkymas: Įdiekite patikimą klaidų tvarkymą, kad grakščiai tvarkytumėte bet kokias klaidas, kurios atsiranda serverio atnaujinimo proceso metu. Rodykite informatyvius klaidų pranešimus vartotojui ir suteikite galimybę bandyti veiksmą iš naujo.
• Vartotojo grįžtamasis ryšys: Suteikite aiškų vizualinį grįžtamąjį ryšį vartotojui, kad parodytumėte, jog jo įvestis yra apdorojama. Tai gali būti įkėlimo suktukas, progreso juosta ar paprastas pranešimas, pvz., „Atnaujinama...“. Be aiškaus grįžtamojo ryšio vartotojai gali pasimesti ar susierzinti, ypač jei „debounce“ delsa yra santykinai ilga.
• Lokalizacija: Užtikrinkite, kad visi tekstai ir pranešimai būtų tinkamai lokalizuoti skirtingoms kalboms ir regionams. Tai apima klaidų pranešimus, įkėlimo indikatorius ir bet kokį kitą tekstą, kuris rodomas vartotojui.

Pavyzdys: paieškos juostos „Debouncing“

Panagrinėkime konkretesnį pavyzdį: paieškos juosta elektroninės prekybos programoje. Norime atidėti paieškos užklausą, kad nesiųstume per daug užklausų serveriui, kol vartotojas rašo.

            import React, { useState, useCallback, useEffect } from 'react';
import { useActionState } from 'react-dom/server';
import debounce from 'lodash.debounce';

async function searchProducts(prevState: any, formData: FormData) {
  // Simulate a product search
  const query = formData.get('query') as string;
  await new Promise(resolve => setTimeout(resolve, 500)); // Simulate network latency
  // In a real application, you would fetch search results from a database or API here
  const results = [`Product A matching "${query}"`, `Product B matching "${query}"`];
  return { success: true, message: `Search results for: ${query}`, results: results };
}

function SearchBar() {
  const [searchQuery, setSearchQuery] = useState('');
  const [state, dispatch] = useActionState(searchProducts, {success: false, message: "", results: []});
  const [searchResults, setSearchResults] = useState<string[]>([]);

  const debouncedSearch = useCallback(debounce((query: string) => {
    const formData = new FormData();
    formData.append('query', query);
    dispatch(formData);
  }, 300), [dispatch]);

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const newQuery = event.target.value;
    setSearchQuery(newQuery);
    debouncedSearch(newQuery);
  };

  useEffect(() => {
    if(state.success){
      setSearchResults(state.results);
    }
  }, [state]);

  return (
    <div>
      <input type="text" placeholder="Search for products..." value={searchQuery} onChange={handleChange} />
      <p>{state.message}</p>
      <ul>
        {searchResults.map((result, index) => (
          <li key={index}>{result}</li>
        ))}
      </ul>
    </div>
  );
}

export default SearchBar;

            

              
                Copy
              
            
          

Šis pavyzdys parodo, kaip atidėti paieškos užklausą naudojant lodash.debounce ir useActionState. searchProducts funkcija imituoja produktų paiešką, o SearchBar komponentas rodo paieškos rezultatus. Realaus pasaulio programoje searchProducts funkcija gautų paieškos rezultatus iš backend API.

Daugiau nei paprastas „Debouncing“: pažangios technikos

Nors aukščiau pateikti pavyzdžiai demonstruoja pagrindinį „debouncing“, yra pažangesnių technikų, kurias galima naudoti norint dar labiau optimizuoti našumą ir vartotojo patirtį:

• „Leading Edge Debouncing“: Su standartiniu „debouncing“, funkcija vykdoma po delsimo. Su „leading edge debouncing“, funkcija vykdoma delsimo pradžioje, o vėlesni iškvietimai delsimo metu yra ignoruojami. Tai gali būti naudinga scenarijuose, kai norite suteikti vartotojui nedelsiantį grįžtamąjį ryšį.
• „Trailing Edge Debouncing“: Tai standartinė „debouncing“ technika, kai funkcija vykdoma po delsimo.
• „Throttling“: „Throttling“ yra panašus į „debouncing“, tačiau vietoj to, kad atidėtų funkcijos vykdymą, kol praeis neveiklumo laikotarpis, „throttling“ riboja greitį, kuriuo funkcija gali būti iškviesta. Pavyzdžiui, galite apriboti funkcijos iškvietimą ne dažniau kaip kartą per 100 milisekundžių.
• Adaptyvusis „Debouncing“: Adaptyvusis „debouncing“ dinamiškai koreguoja „debounce“ delsą atsižvelgiant į vartotojo elgesį ar tinklo sąlygas. Pavyzdžiui, galite sumažinti „debounce“ delsą, jei vartotojas rašo labai lėtai, arba padidinti delsą, jei tinklo delsa yra didelė.

Išvada

„Debouncing“ yra esminė technika, skirta optimizuoti interaktyvių interneto programų našumą ir vartotojo patirtį. React kablys useActionState suteikia galingą ir elegantišką būdą įdiegti „debouncing“, ypač kartu su React serverio komponentais ir serverio veiksmais. Suprasdami „debouncing“ principus ir useActionState galimybes, kūrėjai gali kurti reaguojančias, efektyvias ir patogias naudoti programas, kurios plečiasi visame pasaulyje. Atminkite, kad diegiant „debouncing“ programose su pasauline auditorija, reikia atsižvelgti į tokius veiksnius kaip tinklo delsa, IME naudojimas ir prieinamumas. Pasirinkite tinkamą „debouncing“ techniką („leading edge“, „trailing edge“ ar adaptyviąją) atsižvelgiant į konkrečius jūsų programos reikalavimus. Pasinaudokite bibliotekomis, tokiomis kaip lodash.debounce, kad supaprastintumėte diegimą ir sumažintumėte klaidų riziką. Laikydamiesi šių gairių, galite užtikrinti, kad jūsų programos suteiks sklandžią ir malonią patirtį vartotojams visame pasaulyje.